<template>
  <screenContainer>
    <div class="board-box">
      <dv-border-box-13 v-for="item in data" :key="item.deviceName">
        <div class="block-title">{{item.deviceName}}<br/>&nbsp;{{item.name}}</div>
        <div class="block-main">
          <div class="__nums">
            <div class="__nums-item">
              <div>{{item.targetedValues[0].value}}&nbsp;{{item.targetedValues[0].unitName}}</div>
              <div><span class="iconfont icon-weight"></span></div>
            </div>
            <div class="__nums-item">
              <div>{{item.targetedValues[1]?.value}}&nbsp;{{item.targetedValues[1]?.unitName}}</div>
              <div><span class="iconfont font24 icon-yaqiang"></span></div>

            </div>
            <div class="__nums-item">
              <div>{{item.targetedValues[2]?.value}}&nbsp;{{item.targetedValues[2]?.unitName}}</div>
              <div><span class="iconfont icon-wenduji"></span></div>

            </div>
            <div class="__nums-item">
              <div>{{item.targetedValues[3]?.value}}&nbsp;{{item.targetedValues[3]?.unitName}}</div>
              <div><span class="iconfont icon-shijianxuliepinshuaizhuanhuan-xuanzhong"></span></div>

            </div>
          </div>
          <div class="__imgs">
            <img src="./bottom_bg.png" />
            <div class="__outer-box">
              <div :class="`__outer ${item.deviceStatus ==='stop' ? '' : '__ani'}`"></div>
            </div>
           
            <div class="__inner-box">
              <div :class="`__inner ${item.deviceStatus ==='stop' ? '' : '__ani'}`">
                <span :class="`iconfont icon-shuaxin`" :style="{
                  color: item.color
                }"></span>
              </div>
            </div>
          </div>
          <div class="__icons">
            <div class="__circle" :style="{
              backgroundColor: item.color
            }">
              <div class="__circle-mask" :style="{
                height: `${100 - item.productionPercentage}%`
              }"></div>
            </div>

            <img src="./u409.png" />
          </div>
        </div>
      </dv-border-box-13>
    </div>
  </screenContainer>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive, watch } from 'vue';
import screenContainer from '../compNew/boadrContainer.vue';
import useData from './useData';

const { data } = useData();
const loading = ref(true);
const height = ref(400);
const getKettleClass = (status: any) => {
  if (status === 1) {
    return 'is-blue';
  }
  if (status === 2) {
    return 'is-green';
  }
  if (status === 3) {
    return 'is-red';
  }
  return 'is-gray';
};
onMounted(async () => {

});
</script>
<style lang="less" scoped>
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

@keyframes rotate2 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


.board-box {
  box-sizing: border-box;
  height: 100%;
  padding: 10px;
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: repeat(4, 1fr);
  grid-row-gap: 1vh;
  grid-column-gap: 1vh;
  overflow: hidden;

  @media screen and (max-width: 800px) {
    overflow-y: auto;
    min-height: 100%;
    overflow-y: auto;
    display: block;
    padding: 0 30px 20px 30px;

    .dv-border-box-13 {
      height: 40vh;
      margin-top: 10px;
    }
  }
}

.block-title {
  font-size: 1.8vh;
  color: #ffffff;
  position: absolute;
  left: 1.5vh;
  top: 2vh;
}

.__nums {
  position: absolute;
  top: 2vh;
  right: 2vh;

  .__nums-item {
    display: flex;
    font-size: 2vh;
    font-weight: 600;
    align-items: center;
    color: #ffffff;
    margin-top: 0.5vh;

    >div:first-child {
      padding-right: 1.6vh;
      width: 8vh;
    }

    >div:last-child {
      width: 4vh;
      display: flex;
      justify-content: center;
    }

    span {
      font-size: 3vh;
      color: #22eddc;
    }

    .font24 {
      font-size: 2.9vh;
    }
  }
}

.__imgs {
  position: absolute;
  right: 2.5vh;
  bottom: 3vh;
  height: 11vh;

  img {
    height: 11vh;
    width: auto;
  }

  .__inner-box {
    width: 5vh;
    height: 5vh;
    position: absolute;
    right: 3.2vh;
    top: 50%;
    transform: translateY(-55%);
  }

  .__outer-box {
    width: 13vh;
    height: 13vh;
    position: absolute;
    right: -1vh;
    top: 50%;
    transform: translateY(-51%);
  }

  .__outer {
    width: 13vh;
    height: 13vh;
    border: 3px dashed rgb(18, 54, 109);
    border-radius: 100%;

    &.__ani {
      animation: rotate2 5s infinite linear;
    }
  }

  .__inner {
    width: 5vh;
    height: 5vh;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid #5b64df;
    border-radius: 100%;
    color: #5b64df;

    &.__ani {
      animation: rotate 1s infinite linear;
    }

    span {
      font-size: 3vh;
    }
  }
}

.__icons {
  position: absolute;
  left: 3vh;
  top: 30%;

  .__circle {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -3vh;
    margin-left: -3.1vh;
    width: 7vh;
    height: 7vh;
    background: red;
    border-radius: 100%;
    overflow: hidden;

    .__circle-mask {
      position: absolute;
      left: 0;
      top: 0;
      height: 40%;
      width: 7vh;
      background: #e1e5e5;

    }
  }

  img {
    width: 14vh;
    height: auto;
  }
}
</style>
